<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<title>kiwiw3</title>
</head>
<script>
	var cameraControler
	var cameraFocusTarget;

	isStartedProject = false;

	var global360Img = new Image();
	function startK() {
		if (!kisgame.GameStage) { return; }
		if (isStartedProject) { return; }

		isStartedProject = true;

		stage = new Stage();
		var stageSize = stage.getStageSize();
		var cStage = new kisgame.GameStage("webgl");
		//var cStage =  new kisgame.GameStage("");
		stage.gameStage = cStage
		stage.gameStage.autoUpdate = true;
		stage.addChild(cStage);
		cStage.background = true;
		cStage.setBackgroundColor("#ff0000");

		var img = global360Img;
		img.src = "images/360/344.jfif";

		var se = new kisgame.KISContainer();

		var light = new kisgame.Light3D();
		light.move(1500, 200, 0);

		var light2 = new kisgame.Light3D();
		light2.move(-1500, 200, 0);

		var camera = new kisgame.Camera3D();
		camera.setFovy(35);
		camera.setView(200, 15000);//有bug
		camera.rotationX = 0;
		camera.rotationY = 0;
		camera.move(0, 0, 0);

		var cameraView = new kisgame.CameraView();
		cameraView.setSize(stageSize.width, stageSize.height);
		cameraView.name = "cameraView";
		cameraView.move((stageSize.width - cameraView.width) * 0.5, (stageSize.height - cameraView.height) * 0.5);
		se.addChild(cameraView);

		var scene = new kisgame.Scene3D();
		scene.move(0, 0);
		scene.setCameraAndView(camera, cameraView);
		scene.addLight(light);
		scene.addLight(light2);

		// function onMouseDown(e){
		// 	if(e.button==2)
		// 	{
		// 		return;
		// 	}
		// 	e.stop();
		// 	var tt3d = e.target;
		// 	trace("onMouseDown:",tt3d);
		// 	if(cameraControler)
		// 	{
		// 		cameraControler.endEvent();
		// 		cameraControler.setCameraTarget(tt3d);
		// 		cameraControler.setTargetRadius(500);
		// 		cameraControler.startEvent();
		// 	}
		// }
		// scene.addETL("mousedown",onMouseDown,this);

		cStage.addChild(se);

		var aStage = cStage.canvasStage;
		aStage.setFrameRate(30);
		aStage.setCartCoord(true);
		cStage.setSize(stage.width, stage.height);
		kisgame.Touch.enable(aStage);

		cameraControler = new kisgame.ThirdPersonController(camera, aStage, scene.view, 0, 10000, 300);
		cameraControler.moveEnable =false;
		
		if (camera) {
			aStage.on("tick", function () {
				document.getElementById("camera_x").value = errorValue(camera.x) + " (" + errorValue(camera.x - camera.lastX) + ")";
				camera.lastX = camera.x;

				document.getElementById("camera_y").value = errorValue(camera.y) + " (" + errorValue(camera.y - camera.lastY) + ")";
				camera.lastY = camera.y;

				document.getElementById("camera_z").value = errorValue(camera.z) + " (" + errorValue(camera.z - camera.lastZ) + ")";
				camera.lastZ = camera.z;

				document.getElementById("camera_rx").value = errorValue(camera.rotationX);
				document.getElementById("camera_ry").value = errorValue(camera.rotationY);
				document.getElementById("camera_rz").value = errorValue(camera.rotationZ);
				document.getElementById("_2dDrawCount").value = errorValue(aStage._draw2dTimeCount);
			}, this);
		}

		stage.addETL("contextmenu", function (e) { e.stop(); return true });

		// var sphereMaterial = new kisgame.FillMaterial("#ffff00", kisgame.DrawType.LINES, "front");
		var sphereMaterial = new kisgame.ImageMaterial(img, "front", false);
		//sphereMaterial.drawType = kisgame.DrawType.LINES;
		var sphereRadius = 150;

		//方型测试
		// var halfRectSection = {
		// 	path: [new Float32Array([0, sphereRadius * 0.5, 0]), new Float32Array([sphereRadius, sphereRadius * 0.5, 0]), new Float32Array([sphereRadius, -sphereRadius * 0.5, 0]), new Float32Array([0, -sphereRadius * 0.5, 0])]
		// 	, v: [0, 0.25, 0.75, 1]
		// }
		// halfRectSection.path.forEach((pArr) => pArr[0] -= sphereRadius);
		// var loft3d = kisgame.LoftUtils.createLoftMesh(halfRectSection, kisgame.LoftUtils.createCirlePath(sphereRadius, 4), false, false, sphereMaterial, noScaleCornerFun);

		//纵向
		// var loft3d = kisgame.LoftUtils.createLoftMesh(kisgame.LoftUtils.createCirleSection(sphereRadius, 36, 0, 180, 0, sphereRadius), kisgame.LoftUtils.createCirlePath(sphereRadius, 36,0,360,[2,1,0]), false, false, sphereMaterial, noScaleCornerFun);

		//球型测试
		var loft3d = kisgame.LoftUtils.createLoftMesh(kisgame.LoftUtils.createCirleSection(sphereRadius, 36, 90, -90, -sphereRadius, 0), kisgame.LoftUtils.createCirlePath(sphereRadius, 36), false, false, sphereMaterial, noScaleCornerFun);

		loft3d.move(0, 0, 0);
		scene.addChild(loft3d);


		//测试点
		// sphereRadius = 5;
		// var center = kisgame.LoftUtils.createLoftMesh(kisgame.LoftUtils.createCirleSection(sphereRadius, 5, 90, -90, -sphereRadius, 0), kisgame.LoftUtils.createCirlePath(sphereRadius, 5), false, false, sphereMaterial, noScaleCornerFun);
		// center.move(0, 0, 0);
		// scene.addChild(center);

		// for(let p of pathObj.path)
		// {
		// 	let tempPPPP = kisgame.LoftUtils.createLoftMesh(kisgame.LoftUtils.createCirleSection(sphereRadius, 5, 90, -90, -sphereRadius, 0), kisgame.LoftUtils.createCirlePath(sphereRadius, 5), false, false, sphereMaterial, noScaleCornerFun);
		// 	tempPPPP.move(p[0], p[1], p[2]);
		// 	scene.addChild(tempPPPP);
		// }

		cameraFocusTarget = loft3d;
		testB();
		
		//document.addEventListener("touchstart", function () {return false; }, false);
		//document.addEventListener('deviceready', onDeviceReady, false);
		//document.addEventListener('backbutton', onBackKeyDown, false);
		window.addEventListener("resize", e=> {
			cameraView.setSize(stage.width, stage.height);
			cameraView.move((stage.width - cameraView.width) * 0.5, (stage.height - cameraView.height) * 0.5);
			cStage.setSize(stage.width, stage.height);
		});
	}

	function noScaleCornerFun(section, path, cornerFun) {
		return 1;
	}

	function errorValue(val, error) {
		if (error == undefined) {
			error = 100;
		}
		return Math.round(val * error) / error
	}

	function createUploadFile() {
		var inputObj = document.getElementById("uploadFile");
		if (!inputObj) {
			inputObj = document.createElement('input')
			inputObj.setAttribute('id', 'uploadFile');
			inputObj.setAttribute('type', 'file');
			inputObj.setAttribute("style", 'visibility:hidden');
			document.body.appendChild(inputObj);
			inputObj.addEventListener('change', e => {
				for (let entry of e.target.files) {
					var preview = global360Img;
					var reader = new FileReader();
					reader.onloadend = function () {
						if (!preview.needClearTexture) {
							preview.needClearTexture = true;
							preview.src = reader.result;
						}
					}
					if (entry) {
						reader.readAsDataURL(entry);
					} else {
						// preview.src = "";
					}
				}
			});
		}
		inputObj.click();
	}

	function testB() {
		if (cameraControler) {
			cameraControler.endEvent();
			cameraControler.setCameraTarget(cameraFocusTarget);
			cameraControler.setTargetRadius(1);
			cameraControler.startEvent();
		}
	}

	function GenerateNormalsForTriangleStrip(vertices, indices) {
		var Vector3D = kisgame.Vector3D;

		var normals = new Float32Array(vertices.length);

		for (var i = 0; i < normals.length; i++)
			normals[i] = 0;

		var swappedWinding = false;

		for (var i = 2; i < indices.length; i++) {
			var firstVec = Vector3D.subtractByIndex(Vector3D.create(), vertices, vertices, 0, indices[i - 1] * 3, indices[i] * 3);
			var secondVec = Vector3D.subtractByIndex(Vector3D.create(), vertices, vertices, 0, indices[i - 2] * 3, indices[i] * 3);
			var normal = Vector3D.cross(Vector3D.create(), firstVec, secondVec);
			//trace("normal:" +[normal]);
			Vector3D.normalize(normal, normal);

			if (swappedWinding) {
				normal[0] *= -1;
				normal[1] *= -1;
				normal[2] *= -1;
			}

			if (!isNaN(normal[0])) {
				Vector3D.addByIndex(normals, normals, normal, indices[i] * 3, indices[i] * 3, 0);
				Vector3D.addByIndex(normals, normals, normal, indices[i - 1] * 3, indices[i - 1] * 3, 0);
				Vector3D.addByIndex(normals, normals, normal, indices[i - 2] * 3, indices[i - 2] * 3, 0);
			}

			swappedWinding = !swappedWinding;
		}

		for (var i = 0; i < normals.length; i += 3) {
			Vector3D.normalizeByIndex(normals, normals, i, i);
		}

		return normals;
	}

	/**
	求顶点所有相关的面的法线之和的法线
	*/
	function GenerateNormalsForTriangleList(vertices, indices) {
		var Vector3D = kisgame.Vector3D;
		var normals = new Float32Array(vertices.length);

		for (var i = 0; i < normals.length; i++)
			normals[i] = 0;

		for (var i = 0; i < indices.length; i += 3) {
			var firstVec = Vector3D.subtractByIndex(Vector3D.create(), vertices, vertices, 0, indices[i + 1] * 3, indices[i] * 3);
			var secondVec = Vector3D.subtractByIndex(Vector3D.create(), vertices, vertices, 0, indices[i + 2] * 3, indices[i] * 3);
			var normal = Vector3D.cross(Vector3D.create(), secondVec, firstVec);
			Vector3D.normalize(normal, normal);
			Vector3D.addByIndex(normals, normals, normal, indices[i] * 3, indices[i] * 3, 0);
			Vector3D.addByIndex(normals, normals, normal, indices[i + 1] * 3, indices[i + 1] * 3, 0);
			Vector3D.addByIndex(normals, normals, normal, indices[i + 2] * 3, indices[i + 2] * 3, 0);
		}
		for (var i = 0; i < normals.length; i += 3) {
			Vector3D.normalizeByIndex(normals, normals, i, i);
		}
		return normals;
	}
</script>
<style>
	body {
		margin: 0;
		padding: 0;
		border: 0;
		overflow: hidden;
	}

	.inputText {
		width: 120px;
	}

	.inputButton {
		width: 60px;
	}
</style>
<script>
	var usedScriptLoad = false;
	function loadKISScriptProcess(loaded, total) {
		usedScriptLoad = true;
		document.getElementById("camera_x").value = Math.round((loaded / total) * 100) + "%"
	}
	function loadKISScriptComplete(check) {
		if (check) {
			if (!usedScriptLoad)
				startK();
		}
		else {
			startK();
		}
	}
</script>

<body onload="loadKISScriptComplete(true)" style="background-color:#ccc">
	<!--<script src="js/KISLib.js"></script>
	<script src="js/KISOS.js"></script>
	-->
	<div style="position:absolute;z-index: 1000;">
		<span>camera</span>
		<span>x:<input id="camera_x" class="inputText" /></span>
		<span>y:<input id="camera_y" class="inputText" /></span>
		<span>z:<input id="camera_z" class="inputText" /></span>
		<span>rx:<input id="camera_rx" class="inputText" /></span>
		<span>ry:<input id="camera_ry" class="inputText" /></span>
		<span>rz:<input id="camera_rz" class="inputText" /></span>
		<span>2d/draw:<input id="_2dDrawCount" class="inputText" /></span>
		<input type="button" value="复原聚焦" onclick="testB()" />
		<input type="button" value="选择本地图片" onclick="createUploadFile()" />
	</div>
	<script src="js/KISCore.js"></script>
	<script src="js/KISGame.js"></script>
</body>

</html>